
<template>
  <div class="ques">
    <MyHead :title="$route.query.ques"></MyHead>
    <div class="ques-box">
      <h2>题目:{{ $route.query.ques }}</h2>
      <div class="mt10">
        <van-field
          v-model="answer"
          rows="6"
          autosize
          type="textarea"
          maxlength="400"
          placeholder="请回答你的理解"
          show-word-limit
          class="textarea"
        />
        <div class="mt10">
          <van-button
            @click="addAnswerToOne"
            :disabled="!answer"
            block
            type="primary"
            >提交答案</van-button
          >
        </div>
      </div>
      <div class="alist mt20">
        <div v-if="list.length > 0">
          <van-divider
            :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0' }"
          >
            所有答案({{ list.length }})
          </van-divider>
          <div class="anlist">
            <div class="aitem" v-for="(item, index) in list" :key="index">
              <div class="left">
                <Avatar :src="item.userInfo.avatar"></Avatar>
              </div>
              <div class="right">
                <h3 class="name">
                  {{ item.userInfo.username
                  }}<span
                    v-if="$route.query.phone == item.userInfo.phone"
                    style="color:#EE6666"
                    >(面试者)</span
                  >
                </h3>
                <div class="answer mt5">
                  {{ item.answer }}
                </div>
                <div class="time mt10">
                  <span>{{ item.time | timeFormat(true) }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="empty" v-else>
          <van-empty
            class="custom-image"
            image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
            description="没有答案哦"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  todoaddanswersone,
  todogetanswerlist,
  todochangemshot,
} from "@/api/api";
export default {
  data() {
    return {
      if: "",
      answer: "",
      mid: "",
      list: [],
    };
  },
  methods: {
    async changemsHot() {
      let res = await todochangemshot({
        _id: this.mid,
        hot: this.$route.query.hot * 1 + 4,
      });
      if (res.code == 200) {
      }
    },
    async getListData() {
      let res = await todogetanswerlist({
        if: this.id,
      });
      if (res.code == 200) {
        this.list = res.result;
      }
    },
    async addAnswerToOne() {
      let res = await todoaddanswersone({
        mid: this.mid,
        id: this.id,
        title: this.$route.query.ques,
        time: new Date(),
        answer: this.answer,
      });
      if (res.code == 200) {
        this.ShowSuccess("回答成功");
        this.answer = "";
        this.changemsHot();
        this.getListData();
      }
    },
  },
  mounted() {
    this.id = this.$route.params.id;
    this.mid = this.$route.params.id.split("_ques_")[0];
    this.getListData();
  },
};
</script>

<style lang="scss" scoped>
.anlist {
  width: 100%;
  height: 500px;
  overflow: auto;
  .aitem {
    display: flex;
    margin-top: 18px;
    border-bottom: 0.5px solid #ddd;
    padding-bottom: 10px;
    .name {
      color: #999;
      font-size: 14px;
    }
    .answer {
      color: #000;
      font-weight: bold;
      font-size: 16px;
    }
    .time {
      color: #999;
      font-size: 14px;
    }
  }
}
.textarea {
  border: 0.5px solid #ddd;
  border-radius: 10px;
}
.ques {
  &-box {
    padding: 15px;
  }
}
</style>
